<!--  -->
<template>
  <div class="flex justify-center space-x-2">
    <ScreenButton
      :active="activeTab == AllInOnePCEnum.pointType"
      @click="switchTab(AllInOnePCEnum.pointType)"
      >点位类型</ScreenButton
    >
    <ScreenButton
      :active="activeTab == AllInOnePCEnum.serviceTime"
      @click="switchTab(AllInOnePCEnum.serviceTime)"
      >服务时间</ScreenButton
    >
  </div>
  <div class="w-full" style="height: calc(62% - 26px)" ref="ChartCenter2"></div>
  <div class="w-full grid grid-cols-2 text-sm place-items-start" style="height: calc(38%)">
    <div v-for="(item, index) in chart2value" :key="index" class="w-full grid">
      <div class="flex items-center justify-start">
        <div
          class="w-5 h-3 mr-2 rounded-sm"
          :style="`background-color:${item.itemStyle.color}`"
        ></div>
        <div>{{ item.name }}</div>
      </div>
      <div class="flex items-center transform translate-x-6">
        <div class="mr-4">
          <span class="text-[#00FFF4]">{{ item.value }}</span
          >台
        </div>
        <div>{{ Math.round((item.value / chart2SUM) * 100) + '%' }}</div>
      </div>
    </div>

    <DialogBox title="各板块一体机使用情况" :show="showDialog" @close="showDialog = false">
      <!-- <LineVideo :url="videoUrl"></LineVideo> -->
      <OrderComp></OrderComp>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import DialogBox from '@/components/box/DialogBox.vue'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import type { EChartsOption } from 'echarts'
import { computed, onMounted, ref } from 'vue'

import { requestApi } from '@/api'
import { reverse, sortBy } from 'lodash'
import OrderComp from './components/OrderComp.vue'
enum AllInOnePCEnum {
  pointType = '0',
  serviceTime = '1'
}

const showDialog = ref(false)

onMounted(() => {
  initMainChart()
})
const activeTab = ref(AllInOnePCEnum.pointType)
const ChartCenter2 = ref<HTMLElement>()
let mainChart: useEcharts
const colorList = ['#77CE8E', '#00FFF4', '#FF8934', '#5b8bd4', '#8ccb93']
type chartItem = {
  name: string
  value: number
  itemStyle: {
    color: string
  }
}
const initMainChart = async () => {
  chart2value.value = reverse(sortBy(await getProjectSum(), 'value'))
  const Data = getMainOptionLeft(chart2value.value)
  console.log('ChartCenter2', chart2value.value)
  mainChart = new useEcharts(ChartCenter2.value!, Data, (data) => {
    console.log(data.value)
    // initTable()
    showDialog.value = true
  })
}

const getMainOptionLeft = (data: any[]): EChartsOption => {
  let total = 0
  data.forEach((item) => {
    total += item.value
  })
  return {
    title: [
      {
        text: `{c|总数}\n{a|${total}}{b|台}`,
        left: 'center',
        top: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: 16,
              color: '#fff',
              fontWeight: 600,
              padding: [0, 0, 0, 0]
            },
            b: {
              fontSize: 16,
              color: '#fff',
              padding: [0, 0, 0, 0]
            },
            c: {
              fontSize: 16,
              color: '#fff',
              padding: [5, 0]
            }
          }
        }
      }
    ],
    color: colorList,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    series: [
      {
        tooltip: {
          show: false // 禁用 pictorialBar 系列的 tooltip
        },
        name: '',
        type: 'pie',
        radius: [0, '50%'],
        center: ['50%', '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [{ value: 100, name: '' }]
      },
      {
        center: ['50%', '50%'],
        name: '访问来源',
        type: 'pie',
        radius: ['60%', '75%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  }
}

const getProjectSum = (): Promise<chartItem[]> => {
  return new Promise((resolve) => {
    requestApi
      .GetPositionAndDate({
        params: {
          type: activeTab.value
        }
      })
      .then((res) => {
        let values: chartItem[] = []
        res.forEach((item, index) => {
          values.push({
            name: item.name,
            value: item.value,
            itemStyle: {
              color: colorList[index]
            }
          })
        })
        resolve(values)
      })
  })
}

const chart2value = ref<chartItem[]>([])

const switchTab = async (idx: AllInOnePCEnum) => {
  activeTab.value = idx
  chart2value.value = reverse(sortBy(await getProjectSum(), 'value'))
  const Data = getMainOptionLeft(chart2value.value)
  mainChart.setOption(Data)
}

const chart2SUM = computed(() => {
  let sum = 0
  for (let i = 0; i < chart2value.value.length; i++) {
    sum += chart2value.value[i].value
  }
  return sum
})
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
